lan-reader-chat/app/agents/[agentId]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";
import { AgentAvatar } from "@/components/agents/agent-avatar";
import { loadAgentFeed } from "@/lib/agent-monitor";

const statusClassMap = {
  working: "status-pill status-pill--working",
  idle: "status-pill status-pill--idle",
  warning: "status-pill status-pill--warning",
  offline: "status-pill status-pill--offline"
} as const;

type AgentDetailPageProps = {
  params: Promise<{
    agentId: string;
  }>;
};

export default async function AgentDetailPage({ params }: AgentDetailPageProps) {
  const { agentId } = await params;
  const feed = await loadAgentFeed("all");
  const agent = feed.agents.find((item) => item.id === agentId);

  if (!agent) {
    notFound();
  }

  return (
    <main className="page-shell">
      <section className="page-title">
        <h1>{agent.name}</h1>
        <p>这里保留单个 agent 的详细监控页，重点看当前任务、最近输出、心跳、队列和异常。</p>
      </section>

      <section className="agents-shell">
        <div className="agent-detail-hero">
          <div className="agent-detail-hero__main">
            <div className="agent-card__header">
              <AgentAvatar kind={agent.avatarKind} label={agent.name} large />
              <div>
                <div className="agent-card__name">{agent.name}</div>
                <div className="agent-card__role">{agent.role}</div>
                <div className="chip-row" style={{ marginTop: 14 }}>
                  <span className={statusClassMap[agent.status]}>{agent.statusLabel}</span>
                  <span className="chip">主机 {agent.host}</span>
                  <span className="chip">Owner {agent.owner}</span>
                </div>
              </div>
            </div>
          </div>
          <div className="agent-detail-hero__actions">
            <Link className="button button--secondary" href="/agents">
              返回总览
            </Link>
          </div>
        </div>

        <div className="agent-detail-grid">
          <div className="reader-panel" style={{ padding: 20 }}>
            <div className="agent-detail-section__title">运行状态</div>
            <div className="agent-detail-list">
              <div className="agent-row">
                <div className="agent-row__label">当前状态</div>
                <div className="agent-row__value agent-row__value--strong">{agent.statusLabel}</div>
              </div>
              <div className="agent-row">
                <div className="agent-row__label">最近心跳</div>
                <div className="agent-row__value">{agent.lastHeartbeat}</div>
              </div>
              <div className="agent-row">
                <div className="agent-row__label">运行时长</div>
                <div className="agent-row__value">{agent.uptime}</div>
              </div>
              <div className="agent-row">
                <div className="agent-row__label">最近刷新</div>
                <div className="agent-row__value">{agent.updatedAt}</div>
              </div>
            </div>
          </div>

          <div className="reader-panel" style={{ padding: 20 }}>
            <div className="agent-detail-section__title">任务指标</div>
            <div className="agent-quick-grid">
              <div className="agent-mini-stat">
                <span>任务ID</span>
                <strong>{agent.taskId}</strong>
              </div>
              <div className="agent-mini-stat">
                <span>阶段</span>
                <strong>{agent.taskStage}</strong>
              </div>
              <div className="agent-mini-stat">
                <span>队列深度</span>
                <strong>{agent.queueDepth}</strong>
              </div>
              <div className="agent-mini-stat">
                <span>今日完成</span>
                <strong>{agent.todayCompleted}</strong>
              </div>
            </div>
          </div>

          <div className="reader-panel" style={{ padding: 20 }}>
            <div className="agent-detail-section__title">当前任务</div>
            <div className="agent-detail-highlight">{agent.currentTask}</div>
          </div>

          <div className="reader-panel" style={{ padding: 20 }}>
            <div className="agent-detail-section__title">最近输出</div>
            <div className="agent-detail-paragraph">{agent.lastOutput}</div>
            {agent.lastError ? <div className="agent-detail-note">异常标记: {agent.lastError}</div> : null}
          </div>
        </div>
      </section>
    </main>
  );
}